<template>
	<view>
		<uni-search-bar class="mysearchBar" radius="100" bgColor="#EEEEEE" placeholder="搜索添加工作室" @confirm="search"/>
		<scroll-view scroll-y="true" class="scrollY">
			<view class="gzsList flex-btw">
				<view v-for="(item,index) in gzsList" class="item" :key="index">
					<view class="avatar">
						<image :src="item.avatar" mode=""></image>
					</view>
					<text class="name">{{item.name}}</text>
					<view class="activeBtn" :class="{active: item.active}" @click="gzClick(item)"></view>
				</view>
			</view>
			<uni-popup ref="klpopup" type="center" @change="handlerPopupStatusChenge">
				<view id="kouling">
					<input type="text" v-model="kouling" placeholder="请输入门店口令" />
					<button type="default" hover-class="navigator-hover" @click="addGz()">添加关注</button>
				</view>
			</uni-popup>
		</scroll-view>
	</view>
</template>

<script>
	var gzBtn = require('../../static/imgs/management/gl_gz@2x.png');
	var qgBtn = require('../../static/imgs/management/gl_qg@2x.png');
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	export default {
		components: {uniPopup},
		data() {
			return {
				showKlPop: false,
				kouling: '',
				gzsList: [
					{name: '舞邦工作室', avatar: '../../static/test/a5.jpg', active: false},
					{name: '小思绪工作室', avatar: '../../static/test/a5.jpg', active: true},
					{name: '舞邦工作室', avatar: '../../static/test/a5.jpg', active: true},
					{name: '舞邦工作室', avatar: '../../static/test/a5.jpg', active: false}
				]
			}
		},
		onBackPress(e) {
			if (this.showKlPop) {
				this.$refs['klpopup'].close();
				return true;
			}
		}, 
		methods: {
			search(res) {
				var vm = this;
				vm.gzsList = vm.gzsList.filter(n => n.name.includes(res.value));
			},
			handlerPopupStatusChenge: function(e) {
				this.showKlPop = e.show;
			},
			addGz() {
				var vm = this;
				uni.showToast({
					title: '已关注',
					icon: 'none',
					success() {
						vm.currentItem.active= true;
						vm.kouling = '';
						vm.$refs['klpopup'].close();
					}
				})
				
			},
			gzClick(item) {
				if (item.active) {
					uni.showModal({
						title: '提示',
						content: '确定取消关注?',
						success(res) {
							if (res.confirm) {
								uni.showToast({
									title: '已取关',
									icon: 'none',
									success() {
										item.active = false;
									}
								})
							}
						}
					})
				} else {
					this.currentItem = item;
					this.$refs['klpopup'].open();
				}
			}
		},
		onLoad() {}
	}
</script>

<style lang="scss" scoped>
	.mysearchBar {
		// position: fixed;
		// // #ifdef H5
		// top: 44px;
		// // #endif
		// // #ifdef APP-PLUS
		// top: 0px;
		// // #endif
		/deep/ .uni-searchbar__box {
			justify-content: end;
		}
	}
	.scrollY {
		// #ifdef APP-PLUS
		height: calc(100vh - 52px);
		// margin-top: 36px;
		// #endif
		// #ifdef H5
    height: calc(100vh - 44px - 52px);
    // margin-top: 36px;
		// #endif
		background-color: #F5F5F5;
	}
	.gzsList {
		padding: 10pt;
		flex-wrap: wrap;
		.item {
			width: 45vw;
			height: 45vw;
			background: #fff;
			position: relative;
			margin: 0 0 15px 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		.name {
			font-size: 12px;
			margin-top: 20px;
		}
		.avatar {
			width: 40%;
			height: 40%;
			display: flex;
			align-items: center;
			padding-top: 5px;
			padding-right: 5px;
			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
				border: 1px solid #afafaf;
			}
		}
		.activeBtn {
			position: absolute;
			width: 20px;
			height: 20px;
			right: 5px;
			top: 5px;
			background: url('../../static/imgs/management/gl_gz@2x.png');
			&.active {
				background: url('../../static/imgs/management/gl_qg@2x.png');
				background-size: 100% 100%;;
			}
			background-size: 100% 100%;;
		}
	}
	#kouling {
    background: #fff;
    width: 280px;
    border-radius: 10px;
    height: 170px;
    position: absolute;
    left: calc(50% - 140px);
    top: calc(50% - 85px);
		input {
			width: calc(100% - 30pt);
			height: 60px;
			line-height: 60px;
			text-align: center;
			border-radius: 10px;
			border: 1px solid;
			display: block;
			margin: 25px auto;
		}
		button {
			background: #000;
			color: #fff;
			width: 100px;
			font-size: 14px;
		}
	}
</style>
